<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2024-01-29 09:24:20
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2024-01-29 09:34:50
 * @FilePath: /hr_new_vue3/src/views/Management/Attendance/AttendanceManagement/AttendanceSetting/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 考勤-考勤管理-考勤设定 -->
<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew :title="title"></pageHeaderNew>
    </template>
    <ConditionBox :margin-bottom="20" :margin-top="20">
      <template #left>
        <a-input-search
          :style="{ width: '220px' }"
          placeholder="姓名"
          search-button
          @search="onSearch"
          @press-enter="onSearch"
          v-model="nameSearch"
        />
      </template>
      <template #right>
        <a-button type="primary" @click="open(1)" style="margin-right: 10px">
          设置考勤组
        </a-button>
        <a-button type="outline" @click="open(2)" style="margin-right: 10px">
          设置打卡方案
        </a-button>
        <!-- <a-button type="outline" style="margin-right: 10px">
          设置假期方案
        </a-button> -->
      </template>
    </ConditionBox>
    <table-turn :table-data="getTableData" ref="tableRef" :args="args">
      <a-table-column align="center" :width="80">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column
        align="center"
        :width="200"
        data-index="name"
        title="姓名"
      >
        <template #cell="{ record }">
          {{ record.name || '----' }}
        </template>
      </a-table-column>
      <a-table-column align="center" :width="100" data-index="sex" title="性别">
        <template #cell="{ record }">
          {{ record.sex || '----' }}
        </template>
      </a-table-column>
      <a-table-column
        align="center"
        :width="200"
        data-index="positionName"
        title="职位"
      >
        <template #cell="{ record }">
          {{ record.positionName || '----' }}
        </template>
      </a-table-column>
      <a-table-column
        align="center"
        :width="200"
        data-index="departmentName"
        title="部门"
      >
        <template #cell="{ record }">
          {{ record.departmentName || '----' }}
        </template>
      </a-table-column>
      <a-table-column
        align="center"
        :width="200"
        data-index="defaultAttendanceWorkCalendar.name"
        title="工作日历"
      >
        <template #cell="{ record }">
          <template
            v-if="
              record?.attendanceTeamMember?.attendanceTeam
                ?.attendanceWorkCalendar?.name
            "
          >
            {{
              record?.attendanceTeamMember?.attendanceTeam
                ?.attendanceWorkCalendar?.name
            }}
          </template>
          <template
            v-else-if="
              record.defaultAttendanceTeam?.attendanceWorkCalendar?.name
            "
          >
            <a-tag checkable color="arcoblue" :default-checked="true">
              默认
            </a-tag>
            {{ record.defaultAttendanceTeam.attendanceWorkCalendar.name }}
          </template>
          <template v-else>
            <a-tag checkable color="arcoblue" :default-checked="true"
              >默认</a-tag
            >
            {{ record.defaultAttendanceWorkCalendar?.name }}
          </template>
        </template>
      </a-table-column>
      <a-table-column
        align="center"
        :width="200"
        data-index="defaultAttendanceTeam.name"
        title="考勤组"
      >
        <template #cell="{ record }">
          <template v-if="record.attendanceTeamMember?.attendanceTeam?.name">
            {{ record?.attendanceTeamMember?.attendanceTeam?.name }}
          </template>
          <template v-else-if="record.defaultAttendanceTeam?.name">
            <a-tag checkable color="arcoblue" :default-checked="true">
              默认
            </a-tag>
            {{ record.defaultAttendanceTeam.name }}
          </template>
          <template v-else>
            <a-tag checkable color="arcoblue" :default-checked="true">
              默认
            </a-tag>
            {{ record.defaultAttendanceTeam?.name }}
          </template>
        </template>
      </a-table-column>
      <a-table-column
        align="center"
        :width="200"
        data-index="defaultAttendanceClockIn.name"
        title="打卡方案"
      >
        <template #cell="{ record }">
          <template
            v-if="record?.attendanceTeamMember?.attendanceClockIn?.name"
          >
            {{ record?.attendanceTeamMember?.attendanceClockIn?.name }}
          </template>
          <template
            v-else-if="record.defaultAttendanceTeam?.attendanceClockIn?.name"
          >
            <a-tag checkable color="arcoblue" :default-checked="true">
              默认
            </a-tag>
            {{ record.defaultAttendanceTeam.attendanceClockIn.name }}
          </template>
          <template v-else-if="record.defaultAttendanceClockIn?.name">
            <a-tag checkable color="arcoblue" :default-checked="true">
              默认
            </a-tag>
            {{ record.defaultAttendanceClockIn?.name }}
          </template>
          <template v-else> ---- </template>
        </template>
      </a-table-column>
      <!-- <a-table-column :width="200" data-index="name" title="假期方案">
      </a-table-column> -->
      <a-table-column
        align="center"
        :width="300"
        data-index="name"
        title="操作"
      >
        <template #cell="{ record }">
          <a-space>
            <template v-if="!record.attendanceTeamMember?.attendanceTeam?.id">
              <a-button type="text">设置打考勤组</a-button>
            </template>
            <template v-if="!record?.attendanceTeamMember?.attendanceClockInId">
              <a-button type="text">设置打卡方案</a-button>
            </template>
          </a-space>
        </template>
      </a-table-column>
    </table-turn>
  </ContentCard>
  <a-drawer
    :width="600"
    :visible="visible"
    @ok="handleOk"
    @cancel="visible = false"
    unmountOnClose
  >
    <template #title> {{ titles }}</template>
    <a-space direction="vertical" fill>
      <a-space
        >{{ flagTitle === 1 ? '考勤班组名称：' : '方案名称：' }}
        <a-input-search
          placeholder="请输入"
          style="margin-bottom: 8px; max-width: 240px"
          v-model="flagSearch"
          @search="flagSearcha"
          @press-enter="flagSearcha"
        />
      </a-space>
      <TableTurn
        :tableData="getTableDa"
        ref="abc"
        :args="{
          rowSelection: {
            type: 'radio',
            showCheckedAll: true,
            onlyCurrent: false
          }
        }"
      >
        <a-table-column
          v-if="flagTitle === 1"
          align="center"
          data-index="name"
          title="考勤班组名称"
        >
        </a-table-column>
        <a-table-column
          v-if="flagTitle === 1"
          align="center"
          data-index="attendanceWorkCalendar.name"
          title="工作日历"
        >
        </a-table-column>
        <a-table-column
          v-if="flagTitle === 1"
          align="center"
          data-index="name"
          title="考核周期"
        >
          <template #cell="{ record }">
            <div v-if="record.attendanceCycle.type === 1">自然月</div>
            <div v-else>
              {{
                `${mouth[record.attendanceCycle.startMouth]}${
                  record.attendanceCycle.startDay
                }日至${mouth[record.attendanceCycle.endMouth]}${
                  record.attendanceCycle.endDay
                }日`
              }}
            </div>
          </template>
        </a-table-column>
        <a-table-column
          v-if="flagTitle === 2"
          align="center"
          data-index="name"
          title="打卡方案"
        >
        </a-table-column>
        <a-table-column
          v-if="flagTitle === 2"
          align="center"
          data-index="name"
          title="工作地址"
        >
          <template #cell="{ record }">
            {{
              addressShow(
                record.attendanceClockInAddress.organizationWorkPlaceId
              )
            }}
          </template>
        </a-table-column>
        <a-table-column
          v-if="flagTitle === 2"
          align="center"
          data-index="name"
          title="考勤方式"
        >
          <template #cell="{ record }">
            <div v-if="Array.isArray(record.type) && record.type.length !== 0">
              小程序：{{ applet(record.type) }}
            </div>
            <div
              v-if="
                Array.isArray(record.machineIds) &&
                record.machineIds.length !== 0
              "
            >
              考勤机：{{ machine(record.machineIds) }}
            </div>
          </template>
        </a-table-column>
      </TableTurn>
    </a-space>
  </a-drawer>
</template>

<script lang="ts" setup>
import {
  GetAddressList,
  GetClassesList
} from '@/apis/attendance/base-setting/index';
import { GetWorkPlaceList } from '@/apis/management/organization/organizationManagement';
import { flattenArrayWithChildren } from '@/utils/utils';
import citiesJson from '@/assets/json/pc-code.json';
import { GetMachineList } from '@/apis/attendance/base-setting/index';
import {
  GetAttendanceSettingList,
  PutAttendanceSettingList
} from '@/apis/management/attendance/attendanceManagement/index';
const title = '考勤设定';

// 表格配置
const args = {
  rowSelection: {
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false
  }
};
const mouth = ['上月', '本月', '次月'];

const flagSearch = ref();

const flagTitle = ref(1);
const titles = computed(() => {
  if (flagTitle.value === 1) {
    return '选择考勤组';
  } else {
    return '选择打卡方案';
  }
});
let tableRef = ref();
let abc = ref();
let visible = ref(false);
/* 储存选择的数据 */
const selectedList = computed(() => tableRef.value.selectedList);
const selectedListData = computed(() => tableRef.value.selectedListData);
const nameSearch = ref();
let cityData = flattenArrayWithChildren(citiesJson); // 储存扁平化后的数据

// 获取表格数据
const getTableData = async (pageData?: any) => {
  try {
    const res = await GetAttendanceSettingList({
      name: nameSearch.value,
      ...pageData,
      typeName: [4, 5, 6, 9, 10, 11, 12, 13, 14, 15]
    });

    return Promise.resolve(res);
  } catch (error: unknown) {
    console.log(error);
  }
};
// 刷新表格数据
const refresh = () => {
  tableRef.value.loadData();
};
// 刷新表格数据
const refresha = () => {
  abc.value.loadData();
};
// 搜索框搜索事件
const onSearch = () => {
  refresh();
};
// 搜索框搜索事件
const flagSearcha = () => {
  refresha();
};

const open = (num: 1 | 2) => {
  flagTitle.value = num;
  visible.value = true;
  nextTick(() => {
    refresha();
  });
};
const getTableDa = async (pageData?: any) => {
  try {
    let res;
    if (flagTitle.value === 1) {
      res = await GetClassesList({
        name: flagSearch.value,
        ...pageData
      });
    } else {
      res = await GetAddressList({ ...pageData, name: flagSearch.value });
    }

    return Promise.resolve(res);
  } catch (error: unknown) {
    console.log(error);
  }
};
const options = reactive({ data: [] });
const machineList: any = reactive({ data: [] });

const init = async () => {
  const res = await GetWorkPlaceList({ pageNumber: 0, pageSize: -1 });
  const res1 = await GetMachineList({ pageNumber: -1, pageSize: 0 });
  machineList.data = res1.content;
  options.data = res.content;
  options.data.forEach((ele: any) => {
    ele.cityCode =
      cityData.find((item) => item.code === ele.cityCode.slice(0, 2))?.name +
      cityData.find((item) => item.code === ele.cityCode)?.name;
  });
};
init();
const applet = (arr: number[]) => {
  let str = '';
  arr.forEach((ele) => {
    if (ele === 1) {
      if (str.length !== 0) str += '/小程序';
      else str += '小程序';
    }
    if (ele === 2) {
      if (str.length !== 0) str += '/地点';
      else str += '地点';
    }
    if (ele === 3) {
      if (str.length !== 0) str += '/WIFI';
      else str += 'WIFI';
    }
    if (ele === 4) {
      if (str.length !== 0) str += '/人脸识别';
      else str += '人脸识别';
    }
  });
  return str;
};
const machine = (arr: number[]) => {
  let str = '';
  arr.forEach((ele) => {
    machineList.data.forEach((item: any) => {
      if (ele === item.id) {
        if (str.length !== 0) str += '、' + item.name;
        else str += item.name;
      }
    });
  });
  return str;
};
const addressShow = (id: number) => {
  const name: any = options.data.filter((ele: any) => ele.id === id);
  if (name.length !== 0) {
    return name[0].name;
  } else {
    return '暂无';
  }
};
const handleOk = () => {
  visible.value = false;
};
</script>

<style lang="less" scoped>
.wrap {
  padding: 10px 20px;
}
</style>
